<template>
  <div class="energy-card">
    <div class="card-item">
      <StatusCard :best-machine="bestMachine" :time-data="timeData" :current-data="currentData" :computed-data="computedData" />
    </div>
    <div class="card-item">
      <vechart :options="scatterOptions" />
    </div>
    <div class="card-item">
      <vechart :options="scatterOptions" />
    </div>
    <div class="card-item">
      <vechart :options="scatterOptions2" />
    </div>
  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'
import scatterOptions from '../json/scatterOptions.json'
import scatterOptions2 from '../json/scatterOptions2.json'
import lineOptions from '../json/lineOptions.json'
export default {
  name: 'EnergyCard1111',
  components: {
    StatusCard: () => import('./StatusCard.vue'),
    vechart: () => import('@components/charts/Vechart.vue')
  },
  props: {
    computedData: {
      type: Object,
      default: () => {}
    },
    timeData: {
      type: Object,
      default: () => {}
    },
    last7Data: {
      type: Array,
      default: () => []
    },
    currentData: {
      type: Object,
      default: () => {}
    },
    bestMachine: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      scatterOptions: scatterOptions,
      scatterOptions2: scatterOptions2,
      lineOptions: lineOptions
    }
  },
  computed: {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.energy-card{
  width: 100%;
  min-height: 18rem;
  display: flex;
  justify-content: space-between;
  flex: 1;
  margin-bottom: 1rem;
  max-height: 20rem;
}
.card-item{
  flex: 1;
  position: relative;
}
.selector{
  position: absolute;
  top: 1%;
  right: 5%;
  z-index: 9;
}

</style>
<style>
.selector .el-input--suffix .el-input__inner{
  width: 12rem;
  height: 2rem;
  line-height: 2rem;
  background: transparent;
  border: 1.5px solid rgba(233, 232, 232, 0.5);
  border-radius: 0;
  padding:0 0 0 1rem;
  margin-left: 1rem;
  color: #FFF;
  font-size: 1rem;
}
.selector span .el-input__icon{
  line-height: 2rem;
}
.selector .el-input__suffix{
  right: 0;
}
.el-select-dropdown .el-select-dropdown__item.selected {
    font-weight: 600;
}
.el-select-dropdown .el-select-dropdown__item {
    font-size: 1.3rem;
    padding: 0 10px;
    height: 2.2rem;
    line-height: 2.2rem;
    color: #fff;
}
.el-select-dropdown{
  border-radius: 0!important;
  background-color: #0b1c4a!important;
  border: 1px solid #fff!important;
}
.el-select-dropdown__item.selected{
  color: #00f4ff !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: transparent!important;
}
</style>
